<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card>
            <el-row>
                <el-col :span="8">
                    <el-input placeholder="请输入内容">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <!-- 订单列表数据 -->
            <el-table :data="orderList" border stripe>
                <el-table-column type="index" label="#" align="center"></el-table-column>
                <el-table-column label="路线" prop="order_number" align="center"></el-table-column>
                <el-table-column label="途径" prop="order_price" align="center"></el-table-column>
                <el-table-column label="地址" prop="pay_status" align="center">
                </el-table-column>
                <el-table-column label="电话" prop="is_send" align="center"></el-table-column>


                <el-table-column label="操作" width="180px">
                    <template slot-scope="scope">
                        <!-- 修改按钮 -->
                        <el-button type="primary" size="mini" icon="el-icon-edit"
                            @click="showEditDialog(scope.row)"></el-button>
                        <!-- 删除按钮 -->
                        <el-button type="danger" si ze="mini" icon="el-icon-delete"
                            @click="removeUserByid(scope.row)"></el-button>

                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页区域 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 15]" :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </el-card>
        、
    </div>
</template>
<script>
import cityData from './citydata.js';
export default {
    data() {
        return {
            queryInfo: {
                query: '', //查询条件
                pagenum: 1, //页码
                pagesize: 10, //每页显示条数
            },
            total: 0,
            orderList: [],
            addressVisible: false,
            addressForm: {
                address1: [],
                address2: '',
            },

            cityData,
            progressVisible: false,
            reverse: false,
            timeList: [],
        };
    },
    created() {
        this.getOrderList();
    },
    methods: {
        getOrderList() {
            this.$http
                .get('orders', {
                    params: this.queryInfo,
                })
                .then(res => {
                    if (res.data.meta.status != 200) {
                        return this.$message.error('获取订单列表失败!!!');
                    }
                    console.log(res.data);
                    this.orderList = res.data.data.goods;
                    this.total = res.data.data.total;
                });
        },
        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize;
            this.getOrderList();
        },
        handleCurrentChange(newPage) {
            this.queryInfo.pagenum = newPage;
            this.getOrderList();
        },


        removeUserByid(item) {
            this.$confirm('确定要删除该路线吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(res => {
                    console.log(res);
                    this.$http.delete('ordes/' + item.id).then(res => {
                        console.log(res);
                        if (res.meta.status != 200) {
                            return this.$message.error('删除路线失败');
                        }
                        this.$message.success('删除路线成功');
                        //刷新用户列表
                        this.getOrderList();
                    });
                })
                .catch(err => {
                    console.log(err);
                    return this.$message.info('您已取消删除该路线');
                });
        },


    },
};
</script>
<style lang="less" scoped>
.el-cascader {
    width: 100%;
}
</style>